<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Hello Xiaodu!</title>
    <link rel="stylesheet" href="mystyles.css">
</head>
<body>
    <!-- 页面主标题 -->
    <!-- 视频播放器 -->
    <h1 onclick="toggleVideo()">欢迎来到小杜的网页~</h1> 

    <!-- 视频容器（ID和样式） -->
    <video id="myVideo" controls>
        <source src="test.mp4" type="video/mp4">
        您的浏览器不支持视频播放
    </video>

    <!-- 图片交互容器（点击切换文字） -->
    <div class="img-container" onclick="toggleEnglish()">
        <img class="test-image" src="hua.jpg" alt="测试图片">
    </div>

    <!-- 英文提示文本（默认隐藏） -->
    <div class="eng-text" id="engText">Yangtze University</div>

    <!-- 个人信息卡片（点击跳转404） -->
    <div class="student-info" onclick="goTo404()">
        <p><strong>学号：</strong>2023008280</p>
        <p><strong>姓名：</strong>杜松芝</p>
    </div>

    <script>
	// 视频播放功能
        function toggleVideo() {
            const video = document.getElementById('myVideo');
            if (video.style.display === 'none' || !video.style.display) {
                // 显示并播放
                video.style.display = 'block';
                video.play();
            } else {
                // 隐藏并暂停
                video.style.display = 'none';
                video.pause();
                video.currentTime = 0; // 重置播放进度
            }
        }
        // 切换英文显示功能
        function toggleEnglish() {
	//通过元素的唯一ID engText 获取对应的DOM元素（积木）
            const engText = document.getElementById('engText');
	//三元条件运算符实现状态切换（'block'（显示））
            engText.style.display = engText.style.display === 'none' ? 'block' : 'none';
        }

        // 跳转404页面功能
        function goTo404() {
            window.location.href = '/404.html';
        }
    </script>
</body>
</html>